<template>
  <div class="login-wrapper">
    <div class="login-container">
      <Card icon="log-in" :title="this.$t('m.hòutáiguǎnlǐxìtǒng')" :bordered="false">
        <div class="form-con">
          <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
            <FormItem prop="account">
              <Input v-model="form.account" :placeholder="this.$t('m.qǐngshūrùzhànghào')">
                <span slot="prepend">
                  <Icon :size="16" type="ios-person"></Icon>
                </span>
              </Input>
            </FormItem>
            <FormItem prop="password">
              <Input type="password" v-model="form.password" :placeholder="this.$t('m.qǐngshūrùmìmǎ')">
                <span slot="prepend">
                  <Icon :size="14" type="md-lock"></Icon>
                </span>
              </Input>
            </FormItem>
            <FormItem>
              <Button @click="handleSubmit" type="primary" long>{{$t('m.dēnglù')}}</Button>
            </FormItem>
          </Form>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
  import { mapActions } from 'vuex';
  export default {
    name: 'login',
    data () {
      return {
        rules: {
          account: [
            { required: true, message: this.$t('m.zhànghàobùnéngwéikōng'), trigger: 'blur' }
          ],
          password: [
            { required: true, message: this.$t('m.mìmǎbùnéngwéikōng'), trigger: 'blur' }
          ]
        },
        form: {
          account: '',
          password: '',
        },

      }
    },
    methods: {
      ...mapActions([
        'setAvatar',
        'setAccount',
        'setRoles',
        'setPeacock',
        'setUpdatePassword',
        'setSysConfig'
      ]),
      getAvatarUrl () {
        return Math.floor(Math.random() * 6 + 1);
      },
      handleSubmit () {
        const { loginForm } = this.$refs;
        loginForm.validate((valid) => {
          if (valid) {
            this.$http.post('/api/laocai/sys/account/login', this.form)
            .then((response) => {
              // console.log(response)
              if (response.body.code === 0) {
                // ------------
                this.setRoles(response.body.result.roles[0]);
                this.setUpdatePassword(response.body.result.updatePassword);                
                var setMount = response.headers.map['x-peacock-auth'];
                localStorage.setItem("x-peacock-auth", setMount[0]);
                localStorage.setItem("x-currentType", response.body.result.sysConfig.currentType );
                localStorage.setItem("x-currentName", response.body.result.sysConfig.currentName );
                localStorage.setItem("x-countryName", response.body.result.sysConfig.countryName );
                this.setPeacock(setMount);
                this.setAccount(response.body.result.account)
                this.setAvatar(this.getAvatarUrl());
                // this.$Message.success('info');
                this.$router.push('/home');
              }else{
                 this.$Message.error(this.$t('m.yònghùmínghuòzhěmìmǎcuòwù'));
              }
            },  error => {});
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../static/style.css";
  @import './styles/index.scss';
</style>
